<%@page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" import="java.util.*,hotel.entity.*"%>
<%@include file="../link.html"%>
<!-- 新增房客页面 -->
<script type="text/javascript">
var html1 = "<div class='form-group'><label class='col-sm-4 control-label'>入住房客";
var html2 = "</label><div class='col-sm-5'><input name='customerName' class='form-control' required></div></div>";
var html3 = "<div class='form-group'><label class='col-sm-4 control-label'>身份证号码</label><div class='col-sm-5'><input name='id_number' class='form-control' required></div></div>";
var html4 = "<div class='form-group'><label class='col-sm-4 control-label'>联系电话</label><div class='col-sm-5'><input name='tele' class='form-control' required></div></div>";
var allocated=${allocated};//当前已入住人数
$(document).ready(function() {
	$("#btn-close").click( function () { 
		var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
		parent.layer.close(index); //再执行关闭 
	});
	
	//增加房客
	$("#btn-addCustomer").click(function() {
		var count = parseInt($('#count').val());
		if (allocated+count >= 3) {
			layer.msg('抱歉! 已达到房间最大入住人数3人',{time : 1000,icon : 5});
			return;
		}
		$('#count').val(++count);
		var html=$('#addCustomer').html();
		$('#addCustomer').html(html+html1+count+html2+html3+html4);
	});

	//减少房客
	$("#btn-deleteCustomer").click(function() {
		var count = parseInt($('#count').val());
		if (count <= 1) {
			return;
		}
		$('#count').val(--count);
		$('#addCustomer').html('');
		for(var i=0;i<count-1;i++){
			$('#addCustomer').html($('#addCustomer').html()+html1+(i+2)+html2+html3+html4);
		}
	});
});

function save(){
	var index=$('#btn-submit').attr('class').indexOf("disabled");
	if(index==-1){//disabled的下标为-1说明确定按钮可用
		$.ajax({
	        type:"post",
	        url:"addCustomer",
	        data: $('#addCustomerForm').serialize(),//表单数据
	        success: function(data){
				layer.msg('保存成功', {icon: 1, time: 800}, function(){//关闭后执行的操作
						var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
						parent.layer.close(index); //再执行关闭 
					});  
	        }
	    });
	}
	return false;
}
</script>

<div style="padding-top:25px;">
	<form id="addCustomerForm" action="addCheckin" method="post" class="form-horizontal" 
	data-toggle="validator" role="form">
		
		<input type="hidden" name="itemid" value="${itemid}">
		
		<div class="form-group">
			<label class="col-sm-4 control-label">房间编号</label>
			<div class="col-sm-5">
					<input class="form-control" readonly value="${roomNo}">
			</div>
		</div>
		
		<div class="form-group">
			<label class="col-sm-4 control-label">房客数量</label>
			<div class="col-sm-5">
				<div class="input-group">
					<span class="input-group-addon">
						<button id="btn-deleteCustomer" type="button" class="btn btn-primary btn-xs">
							<i class="fa fa-minus"></i>
						</button>
					</span>
					<input id="count" name='count' class="form-control" readonly value="1">
					<span class="input-group-addon">
						<button id="btn-addCustomer" type="button" class="btn btn-primary btn-xs">
							<i class="fa fa-plus"></i>
						</button>
					</span>
				</div>
			</div>
		</div>
		
		<div class="form-group">
			<label class="col-sm-4 control-label">入住房客1</label>
			<div class="col-sm-5">
				<input name="customerName" class="form-control" autofocus="autofocus" required>
			</div>
			<div class="help-block with-errors"></div>
		</div>

		<div class='form-group'>
			<label class='col-sm-4 control-label'>身份证号码</label>
			<div class='col-sm-5'>
				<input name='id_number' class='form-control' required>
			</div>
			<div class='help-block with-errors'></div>
		</div>

		<div class='form-group'>
			<label class='col-sm-4 control-label'>联系电话</label>
			<div class='col-sm-5'>
				<input name='tele' class='form-control' required>
			</div>
			<div class='help-block with-errors'></div>
		</div>
		
		<div id="addCustomer"></div>
		
		<div class="box-footer"></div>
		
		<div class="form-group">
			<label class="col-sm-4 control-label"></label>
			<div class="col-sm-5">
				<div class="pull-right">
					<button id="btn-submit" type="submit" class="btn btn-primary" onClick="return save()">
						<i class="fa fa-floppy-o "></i> 保存
					</button>
					<button id="btn-close" class="btn btn-close btn-primary" type="button">
						<i class="fa fa-remove"></i> 关闭
					</button>
				</div>
			</div>
		</div>
	</form>
</div>